<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #container {
            height: 100%
        }
        img{
            height: 100px;
            width: 133px;
        }
    </style>
    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=H9vl9tntUBQklAGsOkYKaw6CPArK7Qmf"> -->
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1sH2UIgvEGRv7w0GnFxt1ggHkYGGar1u"></script>
    </script>
</head>

<body>

    <div id="container">


    </div>
    <div id='allmap'></div>
    <div id='result'>
        城市名: <input id="cityName" type="text" />
        <button onclick="theLocation()" />查询</button>
    </div>
    <script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 创建地图实例 
        var point = new BMapGL.Point(108.28052118354381, 22.868140794384043);
        // 创建点坐标 
        map.centerAndZoom(point, 12);
        // 初始化地图，设置中心点坐标和地图级别
        //开启滚轮缩放
        map.enableScrollWheelZoom(true);
        //如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：
        map.enableScrollWheelZoom(true);
        map.setHeading(64.5);
        map.setTilt(73);

        //定位控件
        var locationControl = new BMapGL.LocationControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(20, 20)
        });
        // 将控件添加到地图上
        map.addControl(locationControl);

        // 添加定位事件
        locationControl.addEventListener("locationSuccess", function(e) {
            var address = '';
            address += e.addressComponent.province;
            address += e.addressComponent.city;
            address += e.addressComponent.district;
            address += e.addressComponent.street;
            address += e.addressComponent.streetNumber;
            alert("当前定位地址为：" + address);
        });
        locationControl.addEventListener("locationError", function(e) {
            alert(e.message);
        });


        //地图控件
        var cityControl = new BMapGL.CityListControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(10, 5)
        });
        // 将控件添加到地图上
        map.addControl(cityControl);

        var marker = new BMapGL.Marker(point, {
            //拖拽
            enableDragging: true
        }); // 创建标注
        map.addOverlay(marker);

        function theLocation() {
            var city = document.getElementById("cityName").value;
            if (city != "") {
                map.centerAndZoom(city, 11); // 用城市名设置地图中心点
            }
        }
        var sContent = `<h4 style='margin:0 0 5px 0;'>中盟科技园</h4>
    <img style='float:right;margin:0 4px 22px' id='imgDemo' src='/zmjky.jpg' width='139' height='124'/>
    <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
        中盟科技园位于南宁市西乡塘区滨河路5号......
    </p></div>`;
        var opts = {
                width: 200, // 信息窗口宽度
                height: 100, // 信息窗口高度
                title: "中盟科技园", // 信息窗口标题
                message: "这里是南宁"
            }
            // 
        var infoWindow = new BMapGL.InfoWindow(sContent); // 创建信息窗口对象 

        // map.addEventListener('click', function(e) {
        //     alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
        // });

        map.addEventListener('click', function(e) {


            // removeOverlay();

            // var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
            // var marker = new BMapGL.Marker(point); // 创建标注   
            // map.addOverlay(marker);
            marker.addEventListener("click", function() {
                this.openInfoWindow(infoWindow);
                // 图片加载完毕重绘infoWindow
                document.getElementById('imgDemo').onload = function() {
                    infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
                };
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            });
        });

        function removeOverlay() {
            map.clearOverlays();
        }
    </script>
</body>

</html>